<template>
  <el-table
      ref="multipleTableRef"
      :data="filterTableData"
      :default-sort="{ prop: 'No', order: 'descending' }"
      border
      max-height="300"
      style="width: 100%;flex:5"
      @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55"/>
    <el-table-column label="No" sortable width="90">
      <template #default="scope">{{ scope.row.id }}</template>
    </el-table-column>
    <el-table-column label="姓名" property=name sortable width="100"/>
    <el-table-column label="职位" property=position width="100"/>
    <el-table-column label="状态" property=status width="150"/>
    <el-table-column show-overflow-tooltip>
      <template #header>
        <el-input v-model="search" placeholder="Type to search" size="small"/>
      </template>
      <template #default="scope">
        <el-button size="small" @click="release(scope.$index, scope.row)">释放</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import {computed, ref} from 'vue'
import {ElTable} from 'element-plus'
import {usePAUserTwoStore} from "@/stores/PAUserTwo";
import {usePAUserOneStore} from "@/stores/PAUserOne";

const PAUserTwoStore = usePAUserTwoStore()
const PAUserOneStore = usePAUserOneStore()

interface data {
  name: string
  id: number
  position: string
  status: string
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<data[]>([])
const handleSelectionChange = (val: data[]) => {
  multipleSelection.value = val
}
//表格内查询
const search = ref('')
const filterTableData = computed(() =>
    tableData.filter(
        (data) =>
            !search.value ||
            data.name.toLowerCase().includes(search.value.toLowerCase())
    )
)

PAUserTwoStore.getTableData()
const releaseSelect = () => {
  for (let i = 0; i < multipleSelection.value.length; i++) {
    PAUserOneStore.setTableData(multipleSelection.value[i])
    PAUserTwoStore.deleteUser(multipleSelection.value[i])
  }
}

defineExpose({
  releaseSelect,
})

const release = (index: number, row: data) => {
  PAUserOneStore.setTableData(row)
  PAUserTwoStore.tabledata.splice(index, 1)
}

let tableData: data[];
tableData = PAUserTwoStore.tabledata;
</script>
